<template>
  <basic-container>
    <el-page-header @back="onBack">
      <template #content>
        <div class="flex items-center">
          <el-icon>
            <Connection/>
          </el-icon>
          <el-text size="large" tag="b"> 品类信息=></el-text>
          <el-text size="large"> {{ categoryDetail.categoryName }}</el-text>
        </div>
      </template>
      <basic-container>
        <el-descriptions :column="1" size="small">
          <el-descriptions-item label="品类名称 :">
            {{ categoryDetail.categoryNameFull }}
          </el-descriptions-item>
          <el-descriptions-item label="发布状态 :">
            {{ categoryDetail.status === 1 ? '已发布' : '未发布' }}
          </el-descriptions-item>
          <el-descriptions-item label="品类说明 :">
            {{ categoryDetail.categoryDesc }}
          </el-descriptions-item>
        </el-descriptions>
      </basic-container>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="品类信息" name="info">
          <category-info :category-id="this.categoryId"></category-info>
        </el-tab-pane>
        <el-tab-pane label="功能定义" name="function">
          <category-function :category-id="this.categoryId"></category-function>
        </el-tab-pane>
      </el-tabs>

    </el-page-header>
  </basic-container>
</template>

<script>
import {getDetail} from "@/api/iot/category";

import {mapGetters} from "vuex";

export default {
  data() {
    return {
      activeName: 'info',
      categoryId: '',
      categoryDetail: {},
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.categoryId = this.$route.params.categoryId;
      this.activeName = this.$route.query.activeKey;
      getDetail(this.categoryId).then(res => {
        this.categoryDetail = res.data.data;
      });
    },
    onBack() {
      this.$router.push({
        path: '/iot/category',
      });
      this.$router.$avueRouter.closeTag();
    },
    handleClick(tab, event) {
      this.$router.push({
        path: `/iot/category/detail/${this.categoryId}`,
        query:{
          activeKey: tab.paneName
        }
      });
    }
  }
};
</script>

<style>
.cursor {
  cursor: pointer;
}
</style>
